<template>
  <div class="main clearfix">
    <div class="drop-button-container">
      请选择：
      <el-dropdown class="drop-button" @command="handleCommand1">
        <el-button type="primary">
          {{cropType}}<i class="el-icon-arrow-down icon-right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown" class="dropdown">
          <el-dropdown-item v-for="item in cropClass" :key="item.cropId" :command="item.cropName">{{item.cropName}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-dropdown v-show="cropType !== '请选择农作物类型'" class="drop-button" @command="handleCommand2">
        <el-button type="primary">
          {{diseaseType}}<i class="el-icon-arrow-down icon-right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown" class="dropdown">
          <el-dropdown-item v-for="item in disByCropId" :key="item.disId" :command="item.disId">{{item.disName}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <div class="input">
      <el-input placeholder="请输入查询内容" v-model="input" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="searchDis"></el-button>
      </el-input>
    </div>
  </div>
</template>

<script>
import {mapActions, mapMutations, mapState} from "vuex";

export default {
  name: "SearchTools",
  data(){
    return {
      input:'',
      cropType:'请选择农作物类型',
      diseaseType:'请选择病害'
    }
  },
  methods: {
    handleCommand1(cropName) {
      this.cropType = cropName
      let id = null;
      this.cropClass.forEach((item)=>{
        if (item.cropName === cropName){
          id = item.cropId
        }
      })
      this.findDisByCropId(id)
    },
    handleCommand2(disId) {
      this.disByCropId.forEach((item)=>{
        if (item.disId === disId){
          this.diseaseType = item.disName
          this.SetShowDisById(disId)
        }
      })
    },
    searchDis(){
      this.findDisByText(this.input.trim())
    },
    ...mapActions('crop',{findClass:'findClass'}),
    ...mapActions('disease',{findDisByCropId:'findDisByCropId',findDisByText:'findDisByText'}),
    ...mapMutations('disease',{SetShowDisById:"SetShowDisById"})
  },
  computed:{
    ...mapState('crop',['cropClass']),
    ...mapState('disease',['disByCropId'])
  },
  async created() {
    if (this.cropClass === null) await this.findClass()
  }
}
</script>

<style scoped>
  .main{
    height: 50px;
    padding: 0 80px;
    margin: 0 10px;
  }

  .drop-button-container{
    float: left;
  }

  .drop-button{
    margin-right: 40px;
  }

  .icon-right{
    float: right;
    margin-left: 10px;
  }

  .dropdown{
    margin: 0;
  }

  .el-icon-arrow-down {
    width: 50px;
    font-size: 12px;
  }

  .input{
    float: right;
  }
</style>